<!DOCTYPE html>
<head>
  <title>binjgb</title>
  <link href="reset.css" rel="stylesheet">
  <style>
    /* https://css-tricks.com/box-sizing/ */
    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }
    .main {
      display: none;
      position: absolute;
      margin: 0;
      width: 100%;
      height: 100%;
      grid-template-columns: 1fr auto;
      grid-template-rows: 1fr auto;
    }
    .main.ready {
      display: grid;
    }
    canvas {
      width: 480px;
      height: 432px;
      /* Make sure border doesn't shrink the content size, since we want the
         pixels to scale properly. */
      box-sizing: content-box;
      border: 1px solid gray;
      grid-column: 1;
      grid-row: 1;
      align-self: center;
      justify-self: center;
      image-rendering: pixelated;
      image-rendering: -moz-crisp-edges;
    }
    .sidebar {
      grid-column: 2;
      grid-row: 1 / 2;
      overflow: auto;
      transition: width .2s ease-in-out;
    }
    .overlap {
      position: absolute;
      grid-column: 1 / 2;
      grid-row: 1;
      align-self: center;
      justify-self: center;
    }
    .files {
      display: flex;
      flex-direction: column;
      width: 800px;
      height: 70%;
      background-color: white;
      border: 1px solid gray;
      border-radius: 3px;
      padding: 1em;
    }
    .close-button {
      position: absolute;
      top: 16px;
      right: 16px;
      padding: 2px;
    }
    .close-button:hover {
      background-color: rgba(192, 192, 192, 0.8);
      border-radius: 10px;
    }
    .files-header {
      font-size: 125%;
      font-weight: bold;
      padding-bottom: 8px;
      margin: 0 auto;
    }
    .files-content {
      flex-grow: 1;
      overflow: auto;
    }
    .files-content.empty {
      font-size: 125%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .files-content > table {
      border-collapse: collapse;
      border-spacing: 12px;
    }
    .files-footer {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      padding-top: 8px;
    }
    #files-list {
      margin: 8px 0;
      overflow: auto;
    }
    .files thead {
      border-bottom: 1px solid gray;
    }
    .file:hover {
      background-color: rgba(192, 192, 192, 0.8);
      cursor: pointer;
    }
    .file.selected {
      background-color: rgba(128, 128, 192, 0.8);
    }
    .file-name {
      width: 100%;
      padding: 4px;
    }
    .file-size, .file-date {
      padding: 4px;
    }
    .file-image {
      border: 1px solid gray;
      width: 160px;
      height: 144px;
      margin-left: auto;
    }
    .top-line {
      border-top: 1px solid gray;
    }
    #volume {
      height: 1em;
      width: 75px;
    }
    .bar-wrap {
      width: 100%;
      padding: 8px 0;
      grid-column: 1 / 3;
      grid-row: 2;
    }
    .bar {
      display: grid;
      width: 800px;
      margin: auto;
      grid-template-columns: auto 1fr auto;
    }
    #rewind {
      height: 1em;
      width: 100%;
      grid-column: 2;
      margin : 2px;
    }
    #rewindTime {
      padding: 0 8px;
    }
    .left {
      grid-column: 1;
    }
    .right {
      grid-column: 3;
    }
  </style>
</head>
<body>
  <script src="vue.min.js"></script>
  <script src="idb.min.js"></script>
  <div class="main">
    <canvas
       v-bind:width="canvasWidth" v-bind:height="canvasHeight"
       v-show="canvas.show"
       v-bind:style="{width:canvasWidthPx, height:canvasHeightPx}">
    </canvas>
    <div class="sidebar" hidden>
    </div>
    <div class="files overlap" v-if="files.show">
      <div class="files-header">Files</div>
      <label class="close-button" @click="toggleOpenDialog">&times;</label>
      <div class="files-content" v-bind:class="{empty:isFilesListEmpty}">
        <table v-if="!isFilesListEmpty">
          <thead>
            <td class="file-name">Name</td>
            <td class="file-size">Size</td>
            <td class="file-date">Modified</td>
          </thead>
          <tbody id="files-list">
            <tr class="file"
                v-for="(file, index) in files.list"
                v-bind:class="{selected: index==files.selected}"
                @click="selectFile(index)"
                @dblclick="playFile(selectedFile)">
              <td class="file-name">{{file.name}}</td>
              <td class="file-size">{{prettySize(file.rom.size)}}</td>
              <td class="file-date">{{prettyDate(file.modified)}}</td>
            </tr>
          </tbody>
        </table>
        <div v-if="isFilesListEmpty">
          upload a file to play!
        </div>
      </div>
      <div class="files-footer top-line">
        <button @click="uploadRomClicked">upload</button>
        <input type="file" id="uploadRom" hidden @change="uploadRom">
        <button
            v-bind:disabled="isFilesListEmpty"
            @click="playFile(selectedFile)">
          play
        </button>
        <button
            v-bind:disabled="isFilesListEmpty"
            @click="deleteFile(selectedFile)">
          delete
        </button>
        <button
            v-bind:disabled="cantDownloadSave"
            @click="downloadSave(selectedFile)">
          download save
        </button>
        <button
            v-bind:disabled="isFilesListEmpty"
            @click="uploadSaveClicked">
          upload save
        </button>
        <input type="file" id="uploadSave" hidden @change="uploadSave">
        <img class="file-image"
            v-show="selectedFileHasImage"
            :src="selectedFileImageSrc"></img>
      </div>
    </div>
    <div class="bar-wrap top-line">
      <div class="bar">
        <div class="left">
          <button
              v-bind:disabled="files.show"
              @click="toggleOpenDialog">open
          </button>
          <button v-for="scale in [1,2,3,4]"
              v-show="loaded"
              @click="canvas.scale = scale">
            {{scale}}x
          </button>
          <button
              v-show="loaded"
              @click="toggleFullscreen">fullscreen
          </button>
          <span v-if="loaded">
            vol:<input id="volume" type="range" min="0" max="1" step="0.01"
                  v-model:value="volume">
          </span>
          <button
              v-show="loaded"
              v-bind:disabled="files.show"
              @click="togglePause">{{pauseLabel}}</button>
          <input id="colorOptions" v-if="loaded" type="checkbox"
            v-model:checked="colorOptions"></input>
          <label v-if="loaded" for="colorOptions">color options...</label>
          <button
              v-show="loaded"
              @click="toggleRecordVGM">{{vgmLabel}}</button>
        </div>
        <div class="right">
          <span>{{fps.toFixed(1)}}</span> FPS
        </div>
      </div>
      <div class="bar" v-if="colorOptions">
        <div class="left">
          <span v-if="loaded">dmg pal:{{pal}}</span>
          <button
            v-show="loaded" @click="palDown">-</button><button
            v-show="loaded" @click="palUp">+</button>
          <span v-if="loaded">cgb colors:</span>
          <select
              v-if="loaded"
              v-model="cgbColorCurve"
              @change="setCgbColorCurve">
            <option value="0">Raw</option>
            <option value="1" selected>Sameboy</option>
            <option value="2">Gambatte</option>
          </select>
          <input id="useSgbBorder" v-if="loaded" type="checkbox"
            v-model:checked="canvas.useSgbBorder"></input>
          <label v-if="loaded" for="useSgbBorder">SGB border</label>
          <label v-if="needsReload">(reload game for updated colors)</label>
        </div>
      </div>
      <div v-if="loaded && paused">
        <div class="bar">
          <input type="range" id="rewind"
            :min="rewind.minTicks" :max="rewind.maxTicks"
            :value="ticks" @input="rewindTo">
          <span id="rewindTime" class="right">{{rewindTime}}</span>
        </div>
      </div>
    </div>
    <a id="downloadEl" hidden download="game.sav"></a>
  </div>
  <script src="sha1.js"></script>
  <script src="binjgb.js"></script>
  <script src="demo.js"></script>
</body>
